<template>
  <el-select @change="onChange">
    <el-option v-for="item in options" :key="item.value" :="item" />
  </el-select>
</template>
<script setup>
import { computed } from 'vue';
import { useRequest } from 'vue-hooks-plus';
import API from '@/api/api';
const props = defineProps(['apiName', 'config']);
const emit = defineEmits(['change']);
const APIs = {
  organization: () =>
    API.organizationController.getdropdownlist().then(res => {
      return (res || []).map(item => {
        return {
          ...item,
          value: item.id,
          label: item.organizationName,
        };
      });
    }),
  organization2: () =>
    API.organizationController.getdropdownlist().then(res => {
      return (res || []).map(item => {
        return {
          ...item,
          value: item.id,
          label: item.tribeName,
        };
      });
    }),
  country: () =>
    API.configController.getcountrylist().then(res => {
      return (res || []).map(item => {
        return {
          value: item,
          label: item,
        };
      });
    }),
  classification: () =>
    API.classificationController
      .list({
        pageNum: 1,
        pageSize: 99,
      })
      .then(res => {
        return (res.rows || []).map(item => {
          return {
            ...item,
            value: item.id,
            label: item.name,
          };
        });
      }),
  teacher: () =>
    API.teacherController.list().then(res => {
      return (res.rows || []).map(item => {
        return {
          ...item,
          value: item.id,
          label: item.realName,
        };
      });
    }),
};
const req = useRequest(
  async query => APIs[props.apiName]?.(query),
  props.config
);
const options = computed(() => {
  return req.data.value || [];
});
function onChange(value, options) {
  emit(
    'change',
    value,
    req.data.value?.find(item => {
      return item.value == value;
    })
  );
}
</script>
